<template lang="html">
  <div class="box">
    <div class="header">
        <!-- <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
            <el-input placeholder="输入市代名称" v-model="keyword" style="width: 420px;">
              <el-button slot="append" style="width: 120px;" @click="search()">搜索</el-button>
            </el-input>
        </el-form> -->
    </div>
    <div class="body">
        <el-table :data="tableData.list" style="width: 100%">
            <el-table-column label="市代名称" align="center" width="">
              <template slot-scope="scope">
                  <el-popover trigger="click" @show="NStoViewName(scope.row)" placement="right">
                      <div style="line-height:25px;">
                        <p>营业执照：<img :preview="viewData.license" :src="viewData.license" class="preview-img" /></p>
                        <p>开户行：{{viewData.bank}}</p>
                        <p>开户分行：{{viewData.bank_branch}}</p>
                        <p>提现账号：{{viewData.account}}</p>
                        <p>开户人：{{viewData.bank_name}}</p>
                      </div>

                      <el-button slot="reference" type="primary" size="mini" plain>{{scope.row.company}}</el-button>
                  </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="联系电话" prop="phone" align="center" width=""></el-table-column>
            <el-table-column label="负责人" prop="leader" align="center" width=""></el-table-column>
            <el-table-column label="区域" align="center" width="">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                        <p v-for="i,k in scope.row.area" :key="k">{{i.name}}</p>
                        <el-button slot="reference" type="primary" size="mini" plain>查看地区</el-button>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="运营商数量" align="center" width="">
                <template slot-scope="scope">
                    <el-button type="primary" @click="NSopers(scope.row)" size="mini" plain>{{scope.row.agent_nums}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="售卡数量" prop="sale_card" align="center" width="">
                <template slot-scope="scope">
                    <el-button type="primary" @click="NSagentSellCard(scope.row)" size="mini" plain>{{scope.row.agent_nums}}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="保养次数" prop="service_time" align="center" width="">
              <template slot-scope="scope">
                  <el-button type="primary" @click="NSagentMaintain(scope.row)" size="mini" plain>{{scope.row.agent_nums}}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="供应商"  align="center" width="">
              <template slot-scope="scope">
                  <el-button type="primary" @click="NSset(scope.row)" size="mini" plain>设置</el-button>
              </template>
            </el-table-column>
            <!-- <el-table-column label="推荐人" align="center" width="">
                <template slot-scope="scope">
                    <el-popover @show="NScheck(scope.row)" placement="top" trigger="click">
                        <p>推荐人身份:{{recommend.share_type}}</p>
                        <p>推荐人名称:{{recommend.share_name}}</p>
                        <el-button slot="reference" type="primary" size="medium" plain>查看详情</el-button>
                    </el-popover>
                </template>
            </el-table-column> -->
            <el-table-column label="到期提醒" prop="remind_time" align="center" width=""></el-table-column>
        </el-table>
    </div>
    <div class="page_box">
        <el-pagination class="page" layout="prev, pager, next"
          @current-change="switchPage" :page-count='tableData.rows' >
        </el-pagination>
    </div>
    <div class="set">
        <el-dialog :visible.sync="dialogVisible" width="20%" >
            <p>
              <el-radio v-for="i,k in formData" :key="k" v-model="radio" :label="i.id">{{i.name}}</el-radio>
            </p>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="setSm">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <div class="NSopers">
        <el-dialog :visible.sync="dialogVisible2" width="50%" >
          <el-table :data="gridData.list">
            <el-table-column property="company" align="center" label="运营商名称"></el-table-column>
            <el-table-column property="leader" align="center" label="负责人"></el-table-column>
            <el-table-column property="phone" align="center" label="电话"></el-table-column>
            <el-table-column align="center" label="地区">
              <template slot-scope="scope">
                  <p v-for="i,k in scope.row.area_name" :key="k">{{i.city}}-{{i.county}}</p>
              </template>
            </el-table-column>
            <el-table-column property="sale_card" align="center" label="售卡数量"></el-table-column>
            <el-table-column align="center" label="维修厂数量">
              <template slot-scope="scope">
                <el-button type="primary" @click="NSRepair(scope.row)" size="mini" plain>{{scope.row.open_shop}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="page_box">
            <el-pagination class="page" layout="prev, pager, next"
              @current-change="onpage" :page-count='gridData.rows' >
            </el-pagination>
          </div>
        </el-dialog>

    </div>

    <div class="NSagentSellCard">
        <el-dialog :visible.sync="dialogVisible6" width="50%" >
          <el-table :data="agentSellCardData.list">
            <el-table-column property="card_number" align="center" label="邦保养卡号"></el-table-column>
            <el-table-column align="center" width="80" label="卡类型">
              <template slot-scope="scope">
                <p v-if="scope.row.card_type == 1">单次体验</p>
                <p v-if="scope.row.card_type == 4">四次套餐</p>
              </template>
            </el-table-column>
            <el-table-column property="name" width="80" align="center" label="车主姓名"></el-table-column>
            <el-table-column property="phone" align="center" label="车主电话"></el-table-column>
            <el-table-column property="plate" width="100" align="center" label="车牌号"></el-table-column>
            <el-table-column property="car_type" align="center" label="车型">
              <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>{{scope.row.car_type}}-{{scope.row.car_brand}}</p>
                    <el-button slot="reference" type="primary" size="mini" plain>{{scope.row.car_type}}</el-button>
                  </el-popover>
              </template>
            </el-table-column>
            <el-table-column property="card_price" width="120" align="center" label="卡金额"></el-table-column>
            <el-table-column property="sale_time" align="center" label="售卡时间"></el-table-column>
          </el-table>
          <div class="page_box">
            <el-pagination class="page" layout="prev, pager, next"
              @current-change="onpage5" :page-count='agentSellCardData.rows' >
            </el-pagination>
          </div>
        </el-dialog>
    </div>

    <div class="NSagentMaintain">
        <el-dialog :visible.sync="dialogVisible7" width="50%" >
          <el-table :data="maintainData.list">
            <el-table-column property="agent_company" align="center" label="运营商"></el-table-column>
            <el-table-column property="shop_company" align="center" label="维修厂"></el-table-column>
            <el-table-column property="leader" width="100" align="center" label="负责人"></el-table-column>
            <el-table-column property="card_number" align="center" label="地区">
                <template slot-scope="scope">
                    <p>{{scope.row.province}}-{{scope.row.city}}-{{scope.row.county}}</p>
                </template>
            </el-table-column>
            <el-table-column align="center" width="100" label="保养次数">
                <template slot-scope="scope">
                  <el-popover  placement="left" width="800" @show="onshow(scope.row)"  trigger="click">
                      <el-table :data="gridData2.list">
                        <el-table-column property="card_number" align="center" label="邦保养卡号"></el-table-column>
                        <el-table-column width="100" align="center" label="卡类型">
                          <template slot-scope="scope">
                            <p v-if="scope.row.card_type == 1">单次体验</p>
                            <p v-if="scope.row.card_type == 4">四次套餐</p>
                          </template>
                        </el-table-column>
                        <el-table-column property="plate" width="120" align="center" label="车牌号"></el-table-column>
                        <el-table-column property="car_type" align="center" label="车型">
                          <template slot-scope="scope">
                              <el-popover trigger="hover" placement="top">
                                <p>{{scope.row.car_type}}-{{scope.row.car_brand}}</p>
                                <el-button slot="reference" type="primary" size="mini" plain>{{scope.row.car_brand}}</el-button>
                              </el-popover>
                          </template>
                        </el-table-column>
                        <el-table-column property="oil_name" align="center" label="保养用油"></el-table-column>
                        <el-table-column property="service_time" width="100" align="center" label="保养次数"></el-table-column>
                      </el-table>
                      <div class="page_box">
                        <el-pagination class="page" layout="prev, pager, next"
                          @current-change="onpage8" :page-count='gridData2.rows' >
                        </el-pagination>
                      </div>
                      <el-button slot="reference" type="primary" size="mini" plain>{{scope.row.service_num}}</el-button>
                  </el-popover>
                </template>
            </el-table-column>
            <el-table-column property="remain_times" width="100" align="center" label="剩余次数">
              <template slot-scope="scope">
                <el-popover  placement="left" width="800" @show="onshow2(scope.row)"  trigger="click">
                    <el-table :data="gridData2.list">
                      <el-table-column property="card_number" align="center" label="邦保养卡号"></el-table-column>
                      <el-table-column width="100" align="center" label="卡类型">
                        <template slot-scope="scope">
                          <p v-if="scope.row.card_type == 1">单次体验</p>
                          <p v-if="scope.row.card_type == 4">四次套餐</p>
                        </template>
                      </el-table-column>
                      <el-table-column property="plate" width="120" align="center" label="车牌号"></el-table-column>
                      <el-table-column property="car_type" align="center" label="车型">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                              <p>{{scope.row.car_type}}-{{scope.row.car_brand}}</p>
                              <el-button slot="reference" type="primary" size="mini" plain>{{scope.row.car_brand}}</el-button>
                            </el-popover>
                        </template>
                      </el-table-column>
                      <el-table-column property="oil_name" align="center" label="保养用油"></el-table-column>
                      <el-table-column property="service_time" width="100" align="center" label="保养次数"></el-table-column>
                      <el-table-column property="remain_times" width="100" align="center" label="剩余次数"></el-table-column>
                    </el-table>
                    <div class="page_box">
                      <el-pagination class="page" layout="prev, pager, next"
                        @current-change="onpage8" :page-count='gridData2.rows' >
                      </el-pagination>
                    </div>
                    <el-button slot="reference" type="primary" size="mini" plain>{{scope.row.service_num}}</el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <div class="page_box">
            <el-pagination class="page" layout="prev, pager, next"
              @current-change="onpage6" :page-count='maintainData.rows' >
            </el-pagination>
          </div>
        </el-dialog>
    </div>

        <!--  -->
        <div class="NSRepair">
            <el-dialog :visible.sync="dialogVisible3" width="45%" >
              <el-table :data="shopListData.list">
                <el-table-column property="company" align="center" label="维修厂名称"></el-table-column>
                <el-table-column property="leader" align="center" width="100" label="负责人"></el-table-column>
                <el-table-column property="phone" align="center" label="电话"></el-table-column>
                <el-table-column align="center" label="地区">
                  <template slot-scope="scope">
                    <p>{{scope.row.city}}-{{scope.row.county}}</p>
                  </template>
                </el-table-column>
                <el-table-column align="center" width="80" label="售卡数量">
                  <template slot-scope="scope">
                      <el-button type="primary" @click="NSSellCard(scope.row)" size="mini" plain>{{scope.row.card_sale_num}}</el-button>
                  </template>
                </el-table-column>
                <el-table-column align="center" width="80" label="技师">
                  <template slot-scope="scope">
                      <el-button type="primary" @click="NSteacher(scope.row)" size="mini" plain>{{scope.row.tech_num}}</el-button>
                  </template>
                </el-table-column>
                <el-table-column property="audit_time" align="center" label="开通时间"></el-table-column>
              </el-table>
              <div class="page_box">
                <el-pagination class="page" layout="prev, pager, next"
                  @current-change="onpage2" :page-count='shopListData.rows' >
                </el-pagination>
              </div>
            </el-dialog>
            <!-- NSSellCard -->
            <div class="NSSellCard">
                <el-dialog :visible.sync="dialogVisible4" width="40%" >
                  <el-table :data="sellCardData.list">
                    <el-table-column property="card_number" align="center" label="卡号"></el-table-column>
                    <el-table-column align="center" width="100" label="卡类型">
                      <template slot-scope="scope">
                        <p v-if="scope.row.card_type == 1">单次体验</p>
                        <p v-if="scope.row.card_type == 4">四次套餐</p>
                      </template>
                    </el-table-column>
                    <el-table-column property="user_name" align="center" width="100" label="车主姓名"></el-table-column>
                    <el-table-column property="plate" align="center" label="车牌号"></el-table-column>
                    <el-table-column align="center" label="车辆类型">
                      <template slot-scope="scope">
                          <el-popover trigger="hover" placement="top">
                            <p>{{scope.row.car_type}}-{{scope.row.car_brand}}</p>
                            <el-button slot="reference" type="primary" size="mini" plain>{{scope.row.car_brand}}</el-button>
                          </el-popover>
                      </template>
                    </el-table-column>
                    <el-table-column property="sale_time" align="center" label="购卡时间"></el-table-column>
                  </el-table>
                  <div class="page_box">
                    <el-pagination class="page" layout="prev, pager, next"
                      @current-change="onpage3" :page-count='sellCardData.rows' >
                    </el-pagination>
                  </div>
                </el-dialog>
            </div>
            <!-- NSSellCard -->
            <!-- NSteacher -->
            <div class="NSteacher">
              <el-dialog :visible.sync="dialogVisible5" width="40%" >
                <el-table :data="teacherData.list">
                  <el-table-column property="name" align="center" label="姓名"></el-table-column>
                  <el-table-column property="phone" align="center" label="电话"></el-table-column>
                  <el-table-column property="server" align="center" label="从业时间"></el-table-column>
                  <el-table-column property="reward" align="center" label="邦保养奖励金"></el-table-column>
                  <el-table-column align="center" label="换店记录">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                          <p>修理厂名称：{{scope.row.company}}</p>
                          <p>换店理由：{{scope.row.reason}}</p>
                          <p>申请时间：{{scope.row.create_time}}</p>
                          <p>审核时间：{{scope.row.audit_time}}</p>
                          <el-button slot="reference" type="primary" size="mini" plain>查看详情</el-button>
                        </el-popover>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="page_box">
                  <el-pagination class="page" layout="prev, pager, next"
                    @current-change="onpage4" :page-count='teacherData.rows' >
                  </el-pagination>
                </div>
              </el-dialog>
            </div>
            <!-- NSteacher -->
        </div>
        <!--  -->

  </div>
</template>

<script>
export default {
  data (){
    return {
      token: this.$store.state.user.token3,
      // keyword:'',
      tableData:[],
      formData: [],
      gridData: [],
      gridData2: [],
      shopListData:[],
      sellCardData:[],
      teacherData:[],
      agentSellCardData:[],
      maintainData: [],
      recommend: {},
      viewData: {},
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,
      dialogVisible6: false,
      dialogVisible7: false,
      radio:'',

    }
  },
  created(){
    this.supplyList()
  },
  methods: {
    // search(){
    //   this.supplyList()
    // },
    supplyList(page = 1){
      this.tableData = []
      this.$http3.supplyList({
        page: page
      }).then(res=>{
        this.tableData =
        res.data.code == 1?
        res.data.data: []
      })
    },
    switchPage(e){
      this.supplyList(e)
    },
    NSset(e){
      this.formData = [];
      this.gid = e.gid;
      this.$http3.selectSm()
      .then(res=>{
        this.dialogVisible = true
        this.formData =
        res.data.code==1?
        res.data.data:[]
        for(var i=0;i<this.formData.length;i++){
          if(this.formData[i].status == 1){
            this.radio = this.formData[i].id
            break;
          }
        }
      })
    },
    NScheck(e){
      this.recommend = {}
      this.$http3.supplyAdminAuditSupplygetDetail({
        gid: e.gid
      }).then(res=>{
        this.recommend =
        res.data.code == 1?
        res.data.data: {}
      })

    },
    NStoViewName(e){
      this.viewData = {}
      this.$http3.getSupplyDetail({
        gid: e.gid
      }).then(res=>{
        this.viewData =
        res.data.code == 1?
        res.data.data: {}
        this.$previewRefresh()
      })
    },
    setSm(){
      this.$http3.setSm({
        id: this.radio,
        gid: this.gid
      }).then(res=>{
        res.data.code == 1?
        this.$message.success(res.data.msg):
        this.$message.error(res.data.msg);
        this.dialogVisible = false
        this.supplyList()
      })
    },
    NSopers(e){
      this.currentRowNSopers = e
      this.agentListForSup()
    },
    agentListForSup(page=1){
      this.$http3.agentListForSup({
        gid: this.currentRowNSopers.gid,
        page: page
      }).then(res=>{
        this.gridData =
        res.data.code ==1 ?
        res.data.data:[]
        this.dialogVisible2 = true
      })
    },
    onpage(p){
      this.agentListForSup(p)
    },
    NSRepair(e){
      this.currentRowNSRepair = e;
      this.getSShopList()
    },
    getSShopList(page=1){
      this.shopListData = []
      this.$http3.getSShopList({
        token: this.token,
        aid: this.currentRowNSRepair.aid,
        page: page
      }).then(res=>{
        this.shopListData =
        res.data.code == 1?
        res.data.data:[]
        this.dialogVisible3 = true
      })
    },
    onpage2(p){
      this.getSShopList(p)
    },
    NSSellCard(e){
      this.currentRowNSSellCard = e;
      this.getShopCardList()
    },
    getShopCardList(page = 1){
      this.$http3.getShopCardList({
        sid: this.currentRowNSSellCard.sid,
        page:page
      }).then(res=>{
        this.sellCardData =
        res.data.code ==1 ?
        res.data.data:[]
        this.dialogVisible4 = true
      })
    },
    onpage3(p){
      this.getShopCardList(p)
    },
    NSteacher(e){
      this.currentRowNSteacher = e;
      this.getShopWorkList()
    },
    getShopWorkList(page = 1){
      this.$http3.getShopWorkList({
        sid: this.currentRowNSteacher.sid,
        page:page
      }).then(res=>{
        this.teacherData =
        res.data.code == 1?
        res.data.data: []
        this.dialogVisible5 = true
      })
    },
    onpage4(p){
      this.getShopWorkList(p)
    },
    NSagentSellCard(e){
      this.currentRowNSagentSellCard = e;
      this.supplyCardInfo()
    },
    supplyCardInfo(page = 1){
      this.$http3.supplyCardInfo({
        gid: this.currentRowNSagentSellCard.gid,
        page:page
      }).then(res=>{
        this.agentSellCardData =
        res.data.code == 1?
        res.data.data:[]
        this.dialogVisible6 = true
      })
    },
    onpage5(p){
      this.supplyCardInfo(p)
    },
    NSagentMaintain(e){
      this.currentRowNSagentMaintain = e;
      this.supplyAdminGetBbytime()
    },
    supplyAdminGetBbytime(page = 1){
      this.$http3.supplyAdminGetBbytime({
        gid: this.currentRowNSagentMaintain.gid,
        page: page
      }).then(res=>{
        this.maintainData =
        res.data.code == 1?
        res.data.data:[]
        this.dialogVisible7 = true
      })
    },
    onpage6(p){
      this.supplyAdminGetBbytime(p)
    },
    onshow(e){
      this.currentRowShow = e;
      this.getBbytimeDetail()
    },
    getBbytimeDetail(page = 1){
      this.gridData2 = []
      this.$http3.getBbytimeDetail({
        sid: this.currentRowShow.sid,
        token: this.token,
        page: page
      }).then(res=>{
        this.gridData2 =
        res.data.code == 1?
        res.data.data:[]
      })
    },
    onshow2(e){
      this.currentRowShow = e;
      this.getBbytimeDetail()
    },
    onpage8(p){
    this.getBbytimeDetail(p)
    },


  }
}
</script>

<style lang="css" scoped>
@import "../../my-style/app.css";

/deep/ .el-input-group__append, .el-input-group__prepend{
  background-color: #3498E9;
  border: none;
  color: white;
}

.preview-img{
  display: inline-block;
  /*width: 100%;*/
  height: 30px;
}
.header{
  margin-bottom: 10px
}
.page_box{
  text-align: center;
}
</style>
